<template>
  <div>
    <carousel></carousel>
    <search></search>
    <!-- 底部展示医院的结构 -->
    <a-row :gutter="20">
      <a-col :span="20">
        <!-- 等级子组件 -->
        <level @getLevel="getLevel"></level>
        <!-- 地区子组件 -->
        <region @getRegion="getRegion"></region>
        <div class="hospital-box">
          <card
            class="item"
            v-for="item in hospitalArr"
            :key="item.id"
            :hospitalInfo="item"
          ></card>
          <a-empty
            v-if="hospitalArr.length == 0"
            description="暂无相关医院哦"
          />
        </div>
        <div class="pagination-box">
          <a-pagination
            :total="total"
            :size="size"
            show-total
            show-jumper
            show-page-size
            :current="pageNo"
            @change="currentChange"
            @page-size-change="sizeChange"
          />
        </div>
      </a-col>
      <a-col :span="4">
        <tip></tip>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import carousel from "./carousel/index.vue";
import search from "./search/index.vue";
import level from "./level/index.vue";
import region from "./region/index.vue";
import card from "./card/index.vue";
import tip from "./tip/index.vue";

import type { Content, HospitalResponseData } from "@/api/home/type.ts";

import { reqHospital } from "@/api/home/index.ts";
import { ref } from "vue";
import { onMounted } from "vue";

const size = ref<"small" | "medium" | "mini" | "large">("medium");
const pageNo = ref<number>(1);
const pageSize = ref<number>(10);
const hospitalArr = ref<Content>([]);
const total = ref<number>(0);
const hostype = ref<string>("");
const districtCode = ref<string>("");

// 从子组件获取医院分类
const getLevel = (levelValue: string) => {
  hostype.value = levelValue;
  getHospitalInfo();
};

// 从子组件获取地区
const getRegion = (regionValue: string) => {
  districtCode.value = regionValue;
  getHospitalInfo();
};

const getHospitalInfo = async () => {
  let data: HospitalResponseData = await reqHospital(
    pageNo.value,
    pageSize.value,
    hostype.value,
    districtCode.value
  );
  total.value = data.data.totalElements;
  hospitalArr.value = data.data.content;
};

// 分页器页码发生变化的图标
const currentChange = async (current: number) => {
  pageNo.value = current;
  getHospitalInfo();
};

// 分页器下拉菜单也就是size发生变化的时候会触发
const sizeChange = async (size: number) => {
  pageSize.value = size;
  pageNo.value = 1;
  getHospitalInfo();
};

// 组件挂载完毕，发一次请求
onMounted(() => {
  getHospitalInfo();
});
</script>

<style lang="scss" scoped>
.hospital-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;

  .item {
    width: 49%;
    margin: 10px 0;
    cursor: pointer;
  }
}

.pagination-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
</style>
